<template>
  <div class="badge-demo">
    <h2>徽标组件示例</h2>

    <section class="demo-block">
      <h3>基础用法</h3>
      <volvo-badge>
        <volvo-button>基础徽标</volvo-button>
      </volvo-badge>
    </section>

    <section class="demo-block">
      <h3>不同类型</h3>
      <volvo-badge type="basic">
        <volvo-button>圆点徽标</volvo-button>
      </volvo-badge>
      <volvo-badge type="number" content="5">
        <volvo-button>数字徽标</volvo-button>
      </volvo-badge>
    </section>

    <section class="demo-block">
      <h3>不同位置</h3>
      <volvo-badge type="number" content="1" position="top-right">
        <volvo-button>右上</volvo-button>
      </volvo-badge>
      <volvo-badge type="number" content="2" position="top-left">
        <volvo-button>左上</volvo-button>
      </volvo-badge>
      <volvo-badge type="number" content="3" position="bottom-right">
        <volvo-button>右下</volvo-button>
      </volvo-badge>
      <volvo-badge type="number" content="4" position="bottom-left">
        <volvo-button>左下</volvo-button>
      </volvo-badge>
    </section>

    <section class="demo-block">
      <h3>最大值</h3>
      <volvo-badge type="number" content="99">
        <volvo-button>默认最大值</volvo-button>
      </volvo-badge>
      <volvo-badge type="number" :content="200" :max="99">
        <volvo-button>超过最大值</volvo-button>
      </volvo-badge>
    </section>

    <section class="demo-block">
      <h3>自定义颜色</h3>
      <volvo-badge type="number" content="1" color="#ff0000">
        <volvo-button>红色徽标</volvo-button>
      </volvo-badge>
      <volvo-badge type="number" content="2" color="#4CAF50">
        <volvo-button>绿色徽标</volvo-button>
      </volvo-badge>
      <volvo-badge type="number" content="3" color="#FFA500">
        <volvo-button>橙色徽标</volvo-button>
      </volvo-badge>
    </section>
  </div>
</template>

<script setup>
import VolvoBadge from '../components/badge/index.vue'
import VolvoButton from '../components/button/index.vue'
</script>

<style lang="scss" scoped>
.badge-demo {
  padding: 20px;

  h2 {
    margin-bottom: 24px;
    font-size: 24px;
  }

  .demo-block {
    margin-bottom: 32px;

    h3 {
      margin-bottom: 16px;
      font-size: 18px;
    }

    .volvo-badge {
      margin-right: 16px;
      margin-bottom: 16px;
    }
  }
}
</style>
